<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .box {
            background-color: #29292a;
            width: 100vw;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 0 50px 10px 50px;
        }

        .bread {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            color: #e6c678;
            display: inline-flex;
            margin-top: 10px;
            font-size: 12px !important;
        }

        .breadItem {
            width: auto;
            font-size: 14px;
            padding: 4px;
            display: inline-block;
            border-radius: 6px;
            background-color: #090909;
            margin: 0 2px;
            max-width: 120px;
        }

        .breadItem span {
            display: inline-block;
            width: auto;
            max-width: 90px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 1px;
            vertical-align: middle;
        }

        .breadItem:first-child {
            font-size: larger;
            font-weight: 700;
        }

        .container {
            box-sizing: border-box;
            border: 2px solid #e6c678;
            width: 100%;
            flex: 1;
            margin: 10px 0;
            display: flex;
            flex-wrap: wrap;
            overflow-y: auto;
        }

        .item {
            box-sizing: border-box;
            width: 30%;
            height: 100px;
            padding: 20px 0 30px 0;
            margin: 15px 10px;
            border-radius: 6px;
            background-color: #090909;
            cursor: pointer;
        }

        .item:active {
            background-color: #878787;
        }

        .itemIcon {
            width: 100%;
            height: 80%;
            text-align: center;
            font-size: 40px;
        }

        .van-icon {
            color: #e6c678;
        }

        .van-icon-clear {
            color: #ff0000;
        }

        .itemTitle {
            width: 100%;
            text-align: center;
            color: #e6c678;
            padding-top: 10px;
        }

        .top {
            width: 100%;
            height: 35px;
            padding-top: 5px;
            display: flex;
        }

        .top .topLeft {
            flex: 1;
        }

        .top .topRight {
            flex: 1;
            text-align: right;
        }

        .devicePop {
            height: 50%;
            overflow: auto;
        }

        .devicePop .van-col {
            padding: 5px 8px;
            text-align: center;
        }

        .devicePop .van-col .van-button {
            width: 100%;
        }

        .devicePop .van-col .van-button .van-button__text {
            color: #090909;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="bread">
                <div v-for="(item, index) in breadList">
                    <div class="breadItem">
                        <span>{{item.name}}</span>
                        <van-icon name="clear" v-if="item.name != '工作台'" @click="breadClear(item)"></van-icon>
                    </div>/
                </div>
            </div>

            <div class="top">
                <div class="topLeft">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" size="mini"
                        @click="chooseEquipment">切换机台
                    </van-button>
                </div>

                <div class="topRight">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" size="mini"
                        @click="totalClockOut">机台下机</van-button>
                </div>

            </div>

            <div class="container">
                <div class="item" v-for="(item, index) in list" @click="throttle(item, index)">
                    <div class="itemIcon">
                        <van-icon :name="item.icon"></van-icon>
                    </div>
                    <div class="itemTitle">{{item.name}}</div>
                </div>
            </div>

            <van-popup :overlay="false" class="devicePop" v-model="deviceShow" position="bottom">
                <van-col span="4" v-for="item in deviceOctions">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" @click="equipmentClick(item)">
                        {{item.EquipmentName}}</van-button>
                </van-col>
            </van-popup>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'resetBreadList'
        }, function (ret) {
            if (ret.value) {
                vm.breadList.push(ret.value.breadData)
            }
        })

        api.addEventListener({
            name: 'refreshBrowser'
        }, function (ret, err) {
            if (ret.value) {
                console.log(JSON.stringify(ret))
                api.pageParam.choosePlan = false
                vm.breadList.pop()
            }
        })

        api.addEventListener({
            name: 'loughtOut'
        }, function (ret, err) {
            vm.breadList = [
                {
                    name: '工作台',
                    click: true
                },
            ]
            vm.getList()
        })

        vm = new Vue({
            el: '#app',
            data: {
                breadList: [],
                list: [],
                deviceShow: false,
                deviceOctions: [],
                nodeClick: true
            },
            created: function () {
                var that = this;
                console.log('homeApi', JSON.stringify(api.pageParam))
                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }
                if (api.pageParam.choosePlan) { //自动跳转报工
                    that.breadList = [
                        {
                            name: '工作台',
                            click: true
                        },
                        {
                            name: '选择计划',
                            url: 'choosePlan',
                            click: true
                        }
                    ]
                    var newrect
                    if (window.localStorage.getItem('clientHeight') != 752) {
                        newrect = {
                            x: 0,
                            y: 115,
                            w: 'auto',
                            h: api.winHeight - 150 - api.safeArea.bottom
                        }
                    } else {
                        newrect = {
                            x: 0,
                            y: 170,
                            w: 'auto',
                            h: api.winHeight - 230 - api.safeArea.bottom
                        }
                    }
                    api.openFrame({
                        name: 'choosePlan',
                        url: 'choosePlan.html',
                        rect: newrect,
                        bgColor: '#29292a',
                        reload: true,
                        pageParam: api.pageParam
                    })
                } else {
                    that.getList()
                }
            },
            methods: {
                getList() {
                    var that = this
                    // console.log(window.localStorage.getItem('pin'))
                    APP.ajax('ZS_Function_ONE_1', { pin: window.localStorage.getItem('pin') }, function (res) {  //一级查询
                        console.log(JSON.stringify(res))
                        res.ds.map((item) => {
                            item.name = item.FunctionName
                            item.icon = 'setting'
                            if (item.FunctionName == '工作台') {
                                item.click = true
                            } else {
                                item.click = false
                            }
                        })
                        that.list = res.ds

                        that.breadList = that.list.filter((item) => {
                            return item.click == true
                        })
                    })
                },
                totalClockOut() {
                    var that = this
                    APP.ajax('ZS_DownEquipment11', { EquipmentID: api.pageParam.equipment.EquipmentID }, function (res) {
                        if (res.ds[0].status == 200) {
                            vm.$toast(res.ds[0].msg)
                        } else {
                            vm.$toast('下机失败请重试')
                        }
                    })
                },
                getEquipment() {
                    var that = this
                    APP.ajax('getZSEquipment', {empolorName:window.localStorage.getItem('loginName')}, function (res) {
                        that.deviceOctions = res.ds
                    })
                    that.deviceShow = true
                },
                chooseEquipment() {
                    var that = this
                    if (window.localStorage.getItem('Equipment')) {
                        api.confirm({
                            title: '选择机台',
                            msg: '是否确认切换机台？',
                            buttons: ['确定', '取消']
                        }, function (ret, err) {
                            // var index = ret.buttonIndex;
                            if (ret.buttonIndex == 1) {
                                that.chooseEqp = '请选择机台'
                                window.localStorage.removeItem('Equipment')
                                that.getEquipment()
                                that.deviceShow = true
                                api.sendEvent({
                                    name: 'refreshEquipment'
                                })
                            }
                        });
                    } else {
                        that.getEquipment()
                        that.deviceShow = true
                    }
                },
                equipmentClick(equipment) {
                    var that = this
                    vm.$toast('您已选择' + equipment.EquipmentName)
                    window.localStorage.setItem('Equipment', JSON.stringify(equipment))
                    api.pageParam.equipment = equipment
                    api.sendEvent({
                        name: 'refreshEquipment'
                    })
                    api.sendEvent({
                        name: 'refreshChoosePlan'
                    })
                    that.deviceShow = false
                },

                throttle(item, index) {
                    var that = this
                    // alert(JSON.stringify(item))
                    if (that.nodeClick && item) {
                        that.nodeClick = false
                        that.itemClick(item, index)
                    }
              
                    setTimeout(() => {
                        that.nodeClick = true
                    }, 1000)
                },

                itemClick(item, index) {
                    var that = this
                    console.log('itemClick', JSON.stringify(item))
                    // alert(JSON.stringify(item))
                    APP.ajax('ZS_Function_TWO', { UP_FunctionID: item.ZS_FunctionID }, function (res) {  //二级查询
                        if (res.ds.length) {  //有下一级
                            api.pageParam.name = item.name
                            api.pageParam.CheckType = item.FunctionNum
                            if (index != 'none') {
                                item.click = true
                                that.breadList.push(item)
                            }
                            res.ds.map((i) => {
                                i.name = i.FunctionName
                                i.icon = 'setting'
                                i.click = false
                            })
                            that.list = res.ds
                        }
                        else {   //没有下一级

                            if (item.name != '工作台' && item.url) {
                                if (item.url == 'choosePlan') {
                                    item.name == "选择计划"
                                }
                                api.pageParam.name = item.name
                                api.pageParam.CheckType = item.FunctionNum
                                if (index != 'none') {
                                    item.click = true
                                    if (item.url == 'choosePlan') {
                                        item.name = "选择计划"
                                    }
                                    that.breadList.push(item)
                                }
                                // api.toast({
                                //     msg: item.url
                                // })
                                // console.log('item.url',JSON.stringify(item.url))

                                if (window.localStorage.getItem('clientHeight') != 752) {
                                    api.openFrame({
                                        name: item.url,
                                        url: item.url + '.html',
                                        rect: {
                                            x: 0,
                                            y: 115,
                                            w: 'auto',
                                            h: api.winHeight - 150 - api.safeArea.bottom
                                        },
                                        bgColor: '#29292a',
                                        reload: true,
                                        pageParam: api.pageParam
                                    })
                                } else {
                                    api.openFrame({
                                        name: item.url,
                                        url: item.url + '.html',
                                        rect: {
                                            x: 0,
                                            y: 170,
                                            w: 'auto',
                                            h: api.winHeight - 230 - api.safeArea.bottom
                                        },
                                        bgColor: '#29292a',
                                        reload: true,
                                        pageParam: api.pageParam
                                    })
                                }
                            }
                            else if (item.name != '工作台' && !item.url) {
                                api.toast({
                                    msg: '暂无此模块',
                                    location: 'middle'
                                });
                            }


                        }
                    })
                    api.sendEvent({
                        name: 'refreshProductReport'
                    })
                },

                breadClear(item) {
                    var that = this
                    console.log('breadClear', JSON.stringify(item))
                    item.click = false
                    if (item.url) {
                        if (item.url == 'TiaoJianKa') {
                            api.sendEvent({
                                name: 'closeBrowser'
                            })
                        }
                        else if (item.url == 'TryoutDetailsAdd') {
                            api.sendEvent({
                                name: 'closeBrowsertow'
                            })
                        }

                        else {
                            if (api.pageParam.choosePlan) {
                                api.pageParam.choosePlan = false
                                api.sendEvent({
                                    name: 'refreshBrowser'
                                })
                            }
                            api.closeFrame({
                                name: item.url
                            });
                        }
                    }
                    else {
                        APP.ajax('ZS_Function_TWO', { UP_FunctionID: item.ZS_FunctionID }, function (res) {
                            if (res.ds.length) { //有下一级
                                that.itemClick(that.breadList[that.breadList.length - 1], 'none')
                            }
                        })
                    }

                    console.log('sssss', JSON.stringify(item))

                    that.breadList = that.breadList.filter((item) => {
                        return item.click == true
                    })
                    if (that.breadList.length == 1) {
                        that.getList()
                    }
                }
            }
        })
    };
</script>

</html>